<template>
  <div
    class="mac-os"
    @mousedown.self="boot"
    @contextmenu.prevent="onContextShow()"
  >
    <transition name="fade">
      <Bg v-if="isBg"></Bg>
    </transition>
<!--    <transition name="fade">-->
<!--      <Loading v-if="isLoading" @loaded="loaded"></Loading>-->
<!--    </transition>-->
<!--    <transition name="fade">-->
<!--      <Login v-if="isLogin" @logined="logined"></Login>-->
<!--    </transition>-->
    <transition name="fade">
      <DeskTop
        v-if="isDeskTop"
        @lockScreen="lockScreen"
        @shutdown="shutdown"
        @logout="logout"
      ></DeskTop>
    </transition>
    <ul class="records">
      <li>Copyright © 2021-2022 ibaize.vip All Rights Reserved 白泽</li>
      <li><a href="http://beian.miit.gov.cn">蒙ICP备2021004875号-1</a></li>
            <li><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=15058102000039">蒙公网安备 15058102000039号</a>
              <img src="">
            </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.records{
  margin: 0;
  padding: 0;
  height: 40px;
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: rgb(234,234,234);
  display: flex;
  list-style-type: none;
  justify-content: center;

  li {
    line-height: 40px;
    font-size: 14px;
    font-weight: 300;
    color: #000;
    margin:0  25px;
    //margin-right: 50px;
    a {
      color: #000;
      text-decoration:none
    }
    img {
      vertical-align: middle;
      margin: -5px 0 0 5px;
      width: 18px;
    }
  }
}
.mac-os {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>
<script>
import Bg from "@/components/Bg";
// import Loading from "@/components/Loading";
// import Login from "@/components/Login";
import DeskTop from "@/components/DeskTop";
export default {
  components: {
    Bg,
    // Loading,
    // Login,
    DeskTop,
  },
  data() {
    return {
      isBg: true,
      isLoading: false,
      isLogin: false,
      isDeskTop: true,
    };
  },
  created() {
    this.boot();
    // this.logined()
  },
  methods: {
    onContextShow() {
      console.log("onContextShow");
    },
    boot() {
      this.isLoading = true;
    },
    loaded() {
      this.isLoading = false;
      this.isBg = true;
      this.isLogin = true;
    },
    logined() {
      this.isLogin = false;
      this.isDeskTop = true;
    },
    lockScreen() {
      this.isLogin = true;
    },
    logout() {
      localStorage.removeItem("user_name");
      this.isDeskTop = false;
      this.isLogin = true;
    },
    shutdown() {
      localStorage.removeItem("user_name");
      this.isDeskTop = false;
      this.isLogin = false;
      this.isLoading = false;
      this.isBg = false;
    },
  },
};
</script>
